// 导入基础库
import { connect } from 'umi';
// 导入配置参数
import { form_props } from './login.d';
// 导入处理函数
// 导入UI组件
import IconMap from '../../utils/icons';
import ProForm, { ProFormText } from '@ant-design/pro-form';
// 导入LESS样式
import styles from './login.less';

const PageView = (props) => {
  // 初始化参数------------------------------------------------
  const { ui, table: tb, socketio: io, dispatch: dp } = props;
  // const state = { ...ui, ...table, ...socketio }

  // 组件事件处理函数
  const onFinish = (e) => {
    // 表单提交处理函数
    dp({ type: 'socketio/emit', payload: { type: 'login', data: e } });
  };

  // 渲染UI组件------------------------------------------------
  return (
    <div className={styles.login}>
      <ProForm {...form_props} className={styles.loginForm} onFinish={onFinish}>
        <h1 className={styles.title}>人员档案管理系统</h1>
        <ProFormText
          name="user"
          placeholder="请输入账号"
          fieldProps={{ size: 'large', prefix: IconMap['renyuan'] }}
          rules={[{ required: true, message: '请输入账号!' }]}
        />
        <ProFormText.Password
          name="password"
          placeholder="请输入密码"
          fieldProps={{ size: 'large', prefix: IconMap['key'] }}
          rules={[{ required: true, message: '请输入密码!' }]}
        />
      </ProForm>
      <div className={styles.footer}>三点三网络科技提供技术支持</div>
      <div className={styles.bubbles_bg}>
        <ul className={styles.bubbles}>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  );
};

export default connect(({ ui, table, socketio }) => ({ ui, table, socketio }))(
  PageView,
);
